<script setup lang="ts">
import { get, loadFile, message, post } from '@/utils'
import AccountModal from './components/AccountModal.vue'
import useModal from '@/hooks/useModal'
import { BtnPermission } from '@/enum/permission'
import useTable from '@/hooks/useTable'
const { store } = useModal()
const selectedKeys = ref([])
const { formatColumns } = useTable()
const searchQuery = reactive({})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const remove = id => {
  post({ url: '/server-system/admin/user/remove?ids=' + id }, ({ code, msg }) => {
    if (code == 200) actionRef.value.reload()
    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
  })
}
const resetPassword = () => {
  if (!selectedKeys.value.length) message({ type: 'error', content: '至少选择一条数据' })
  else {
    post(
      {
        url: '/server-system/admin/user/reset-password?userIds=' + selectedKeys.value.join(','),
      },
      ({ msg, code }) => {
        if (code == 200) actionRef.value.reload()
        message({
          type: code == 200 ? 'success' : 'error',
          content: msg,
        })
      }
    )
  }
}
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-system/admin/user/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const columns = formatColumns([
  {
    title: '登录账号',
    dataIndex: 'account',
  },
  {
    title: '用户姓名',
    dataIndex: 'name',
  },
  {
    title: '所属角色',
    dataIndex: 'roleName',
    slotName: 'roleName',
  },
  {
    title: '操作',
    dataIndex: 'operations',
    btnList: [
      {
        permission: BtnPermission.编辑,
        name: '编辑',
        handle: ({ record }) => store.handleShow(record),
      },
      {
        name: '删除',
        permission: BtnPermission.删除,
        type: 'popconfirm',
        tip: '确认删除该条数据吗?',
        handle: ({ record }) => remove(record.id),
      },
    ],
  },
])
</script>

<template>
  <div class="page">
    <ProTable
      :columns="columns"
      :request="request"
      row-key="id"
      :form-ref="ref => (formRef = ref)"
      :pagination="pagination"
      header-title=" "
      :scroll="{ x: 1000 }"
      column-resizable
      :params="searchQuery"
      :bordered="{ cell: true }"
      :action-ref="ref => (actionRef = ref)"
      v-model:selectedKeys="selectedKeys"
      :row-selection="{
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false,
      }"
    >
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
        <a-button @click="store.handleShow({})" type="primary" v-permission="[BtnPermission.新建]">
          <template #icon>
            <icon-plus />
          </template>
          新建</a-button
        >
      </template>
      <template #tool-bar>
        <a-button @click="resetPassword" type="primary" v-permission="[BtnPermission.编辑]" class="mb10">
          <template #icon>
            <icon-refresh />
          </template>
          重置密码
        </a-button>
      </template>
      <template #roleName="{ record }">
        <a-space>
          <a-tag color="blue" v-for="tag in record.roleName.split(',')"> {{ tag }}</a-tag>
        </a-space>
      </template>
    </ProTable>
    <AccountModal v-if="store.show" v-model:show="store.show" :id="store.id" @confirm="actionRef.reload" />
  </div>
</template>
